<ng-container *ngIf="data$ | async as data">
  <div class="auth-wrapper">
    <div class="auth-header">
      <div class="left">
        <ng-container *ngIf="data.message.type != 'PickCredentialRequest'">
          <div class="logo">
            <i class="bwi bwi-shield"></i>
          </div>
        </ng-container>
        <ng-container *ngIf="data.message.type === 'PickCredentialRequest'">
          <div class="logo">
            <i class="bwi bwi-shield"></i><span><strong>bit</strong>warden</span>
          </div>
        </ng-container>
      </div>
      <ng-container *ngIf="data.message.type === 'ConfirmNewCredentialRequest'">
        <div class="search">
          <input
            type="{{ searchTypeSearch ? 'search' : 'text' }}"
            placeholder="{{ 'searchVault' | i18n }}"
            id="search"
            [(ngModel)]="searchText"
            (input)="search()"
            autocomplete="off"
            appAutofocus
          />
          <i class="bwi bwi-search" aria-hidden="true"></i>
        </div>
        <div class="right">
          <button type="button" (click)="addCipher()" appA11yTitle="{{ 'addItem' | i18n }}">
            <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
          </button>
        </div>
      </ng-container>
    </div>

    <ng-container>
      <ng-container
        *ngIf="
          data.message.type === 'PickCredentialRequest' ||
          data.message.type === 'ConfirmNewCredentialRequest'
        "
      >
        <div class="auth-flow">
          <p class="subtitle" appA11yTitle="{{ subtitleText | i18n }}">
            {{ subtitleText | i18n }}
          </p>
          <!-- Display when ciphers exist -->
          <ng-container *ngIf="displayedCiphers.length > 0">
            <div class="box list">
              <div class="box-content">
                <app-fido2-cipher-row
                  *ngFor="let cipherItem of displayedCiphers"
                  [cipher]="cipherItem"
                  [isSearching]="searchPending"
                  title="{{ 'passkeyItem' | i18n }}"
                  (onSelected)="selectedPasskey($event)"
                  [isSelected]="cipher === cipherItem"
                ></app-fido2-cipher-row>
              </div>
            </div>

            <div class="box">
              <button
                type="submit"
                (click)="submit()"
                class="btn primary block"
                appA11yTitle="{{ credentialText | i18n }}"
              >
                <span [hidden]="loading">
                  {{ credentialText | i18n }}
                </span>
                <i
                  class="bwi bwi-spinner bwi-lg bwi-spin"
                  [hidden]="!loading"
                  aria-hidden="true"
                ></i>
              </button>
            </div>
          </ng-container>

          <ng-container *ngIf="!displayedCiphers.length">
            <div class="box">
              <button
                type="submit"
                (click)="saveNewLogin()"
                class="btn primary block"
                appA11yTitle="{{ 'savePasskeyNewLogin' | i18n }}"
              >
                <span [hidden]="loading">
                  {{ "savePasskeyNewLogin" | i18n }}
                </span>
                <i
                  class="bwi bwi-spinner bwi-lg bwi-spin"
                  [hidden]="!loading"
                  aria-hidden="true"
                ></i>
              </button>
            </div>
          </ng-container>
        </div>
      </ng-container>
      <ng-container *ngIf="data.message.type === 'InformExcludedCredentialRequest'">
        <div class="auth-flow">
          <p class="subtitle">{{ "passkeyAlreadyExists" | i18n }}</p>
          <div class="box list">
            <div class="box-content">
              <app-fido2-cipher-row
                *ngFor="let cipherItem of displayedCiphers"
                [cipher]="cipherItem"
                title="{{ 'passkeyItem' | i18n }}"
                (onSelected)="selectedPasskey($event)"
                [isSelected]="cipher === cipherItem"
              ></app-fido2-cipher-row>
            </div>
          </div>
          <button type="button" class="btn primary block" (click)="viewPasskey()">
            <span [hidden]="loading">{{ "viewItem" | i18n }}</span>
            <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!loading" aria-hidden="true"></i>
          </button>
        </div>
      </ng-container>
      <ng-container *ngIf="data.message.type === 'InformCredentialNotFoundRequest'">
        <div class="auth-flow">
          <p class="subtitle">{{ "noPasskeysFoundForThisApplication" | i18n }}</p>
        </div>
        <button type="button" class="btn primary block" (click)="abort(false)">
          <span [hidden]="loading">{{ "close" | i18n }}</span>
          <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!loading" aria-hidden="true"></i>
        </button>
      </ng-container>
    </ng-container>

    <app-fido2-use-browser-link></app-fido2-use-browser-link>
  </div>
</ng-container>
